/* eslint-disable no-console */
<template>
  <div class="container with-nav-padding">
    <search-input entry="mall" :status="1"></search-input>
    <div class="mall-slider">
      <yd-slider
        autoplay="3000"
        pagination-color="rgba(255,255,255,0.4)"
        pagination-activecolor="rgba(255,255,255,0.8)"
      >
        <yd-slider-item v-for="(item, index) in carouselList" :key="index">
          <div @click="linkHref(item.link)">
            <img style="width:100%" :src="item.image" />
          </div>
        </yd-slider-item>
      </yd-slider>
    </div>
    <main-nav type="shop"></main-nav>
    <!-- <div class="promotion">
      <div
        :class="{
          'promotion-cell': true,
          'style-1': promotionList.length === 3,
          'style-2': promotionList.length === 2,
          'style-3': promotionList.length === 4
        }"
        v-for="item in promotionList"
        @click="$router.push(item.link)"
        :key="item.id"
      >
        <img :src="item.image" alt="" />
      </div>
    </div>-->
    <!-- <div @click="$router.push('/Vip')" class="ad">
      <img src="@/assets/kll/tuiguangyuan.jpg" alt="" />
    </div>-->
    <!-- <div class="item-panel_big-img">
      <div class="title-bar with-grey-bottom-border">
        <div class="title">
          积分专区
        </div>
        <div @click="$router.push({ path: '/point-good-list' })" class="btn">
          查看全部 <img src="@/assets/jiantou.png" alt="" />
        </div>
      </div>
      <item-big-img
        :goodsLists="pointGoodList"
        imgUrl="img_show"
      ></item-big-img>
    </div>-->
    <div>
      <div v-for="item in list" :key="item.id">
        <div class="item-panel" v-if="isShowModule(item)">
          <div class="title-bar" :style="{backgroundColor: setPercentColor}">
            <div class="title" :style="{color: mainColor}">{{ item.module_name }}</div>
            <div
              @click="toAll(item.data.sys_default, item.data.id)"
              class="btn"
              :style="{color: mainColor}"
            >
              查看全部
              <span class="iconfont icon-jiantou" style="fontSize: 24px"></span>
            </div>
          </div>
          <div class="banner-img" v-if="item.module_name !== '拼团'">
            <img :src="item.data.style" alt />
          </div>
          <div
            v-if="item.hasOwnProperty('data') && !item.data.hasOwnProperty('is_seckill') && item.data.commodity && item.module_name !== '拼团'"
          >
            <item-big-img :goodsLists="item.data.commodity" :seckill="item" imgUrl="img_show"></item-big-img>
          </div>
          <div class="cluster-wrapper" v-if="item.module_name === '拼团'">
            <div class="cluster-inner">
              <!-- 优惠拼团 -->
              <div class="cluster-box" v-for="(secItem, index) of item.data.commodity.slice(0, 4)" :key="index" @click="$router.push({path: `/item-detail/${secItem.commodity_id}`, query: {isSpell: 1}})">
                <cluster-panel :goodsInfo="secItem" />
              </div>
            </div>
            <div class="tip">热销榜单TOP{{item.data.commodity.length}}</div>
          </div>
          <!-- <div class="item-list">
            <div
              @click="$router.push('/item-detail/' + goods.id)"
              class="item-cell"
              v-for="goods in item.commodity"
            >
              <div class="item-title">
                {{ goods.name }}
              </div>
              <div class="info">
                <div class="price">
                  <div v-if="level" class="vip-price">
                    ¥{{ goods.discount_price }} <span class="vip-tag">VIP</span>
                  </div>
                  <div class="normal-price">¥{{ goods.price }}</div>
                </div>
                <div class="item-img">
                  <img :src="goods.img_show" alt="" />
                </div>
              </div>
            </div>
          </div>-->
        </div>
        <template v-if="showModule(item)">
          <div class="style1" v-if="parseInt(item.module_style) === 1">
            <ul>
              <li v-for="mItem of item.data" :key="mItem.id">
                <a :href="mItem.link">
                  <img :src="mItem.image_url" alt />
                </a>
              </li>
            </ul>
          </div>
          <div class="style2" v-if="parseInt(item.module_style) === 2">
            <ul>
              <li v-for="mItem of item.data" :key="mItem.id">
                <a :href="mItem.link">
                  <img :src="mItem.image_url" alt />
                </a>
              </li>
            </ul>
          </div>
          <div class="style3" v-if="parseInt(item.module_style) === 3">
            <ul>
              <li v-for="mItem of item.data" :key="mItem.id">
                <a :href="mItem.link">
                  <img :src="mItem.image_url" alt />
                </a>
              </li>
            </ul>
          </div>
          <div class="style4" v-if="parseInt(item.module_style) === 4">
            <ul>
              <li v-for="mItem of item.data" :key="mItem.id">
                <a :href="mItem.link">
                  <img :src="mItem.image_url" alt />
                </a>
              </li>
            </ul>
          </div>
          <div class="style5" v-if="parseInt(item.module_style) === 5">
            <div class="left">
              <a :href="item.data[0].link">
                <img :src="item.data[0].image_url" alt />
              </a>
            </div>
            <div class="right">
              <ul>
                <li v-for="mItem of item.data.slice(1)" :key="mItem.id">
                  <a :href="mItem.link">
                    <img :src="mItem.image_url" alt />
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </template>
      </div>
      <seckill-panel :list="list">
        <div class="seckill-more" @click="$router.push({path: '/seckill-more'})">
          查看更多
          <i class="iconfont icon-jiantou"></i>
        </div>
      </seckill-panel>

      <div>
        <div v-for="(item, index) in lists" :key="item.id" v-if="item.commodity.length">
          <div class="item-panel_big-img" v-if="showTitle(index)">
            <div
              class="title-bar with-grey-bottom-border"
              :style="{backgroundColor: setPercentColor}"
            >
              <div class="title" :style="{color: mainColor}">{{ item.kind_name }}</div>
              <div
                @click="$router.push({ path: '/category', query: { id: item.id } })"
                class="btn"
                :style="{color: mainColor}"
              >
                查看全部
                <span class="iconfont icon-jiantou" style="fontSize: 24px"></span>
              </div>
            </div>
            <item-big-img :goodsLists="item.commodity" imgUrl="img_show" ref="imgCmp"></item-big-img>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SeckillPanel from "./component/seckill-panel";
import ClusterPanel from "./component/cluster-panel";
import searchInput from "@/components/search/search-input.vue";
import mainNav from "@/components/main-nav.vue";
import itemBigImg from "@/components/item-big-img.vue";
import { getMallData, getPointGoodList, getModuleList } from "@/api/mall";
import { mapState } from "vuex";
import vipsq from "@/assets/kll/tuiguang.jpg";
import vipgm from "@/assets/kll/hehuoren.jpg";
import lingquan from "@/assets/kll/youhuiquan.jpg";
// import vipsq from "@/assets/kll/huiyuanzhuanqu.png";
// import vipgm from "@/assets/kll/zhaoshangdaili.png";
const ERR_OK = 200;
export default {
  data() {
    return {
      promotionList: [
        { image: vipsq, link: "/Vip" },
        { image: vipgm, link: "/agent-zs" },
        { image: lingquan, link: "/coupon" }
      ],
      carouselList: [],
      itemList: [],
      pointGoodList: [],
      list: [],
      lists: [],
      timer: null
    };
  },
  watch: {
    name(newVal) {
      document.title = newVal;
    }
  },
  computed: {
    ...mapState({
      level: state => state.user.level,
      mainColor: state => state.app.mainColor,
      subColor: state => state.app.subColor,
      name: state => state.app.name
    }),
    setPercentColor() {
      const color = this.mainColor.match(
        /^(rgba\(\s*\d+,\s*\d+,\s*\d+,)\s*\d+|0\.d+\)$/
      );
      return `${color[1]} 0.1)`;
    }
  },
  methods: {
    showTitle(index) {
      if (this.$refs["imgCmp"]) {
        return this.$refs["imgCmp"][index].$el.children.length;
      }
      return true;
    },
    isShowModule(item) {
      const is_show =
        item.module_name !== "轮播图" &&
        item.module_name !== "链接区" &&
        item.module_name !== "折扣" &&
        item.module_name !== "秒杀" &&
        parseInt(item.module_style) === -1;
      return is_show;
    },
    showModule(item) {
      const show = parseInt(item.module_style) > 0;
      return show;
    },
    linkHref(link) {
      window.location.href = link;
    },
    toAll(isSys, id) {
      console.log(id)
      if (isSys && id === 1) {
        this.$router.push({ path: "/item-list/new?id=1" });
      } else if (isSys && id === 3) {
        this.$router.push({ path: "/item-list/recommend" });
      } else if (id === 5) {
        this.$router.push({path: '/cluster-list'})
      } else {
        this.$router.push({ path: "/category", query: { id } });
      }
    },
    _getModuleList() {
      getModuleList()
        .then(res => {
          if (res.data.code === ERR_OK) {
            // eslint-disable-next-line no-console
            this.list = res.data.data.list;
            this.lists = res.data.data.lists;
          }
        })
        .catch(err => {
          // eslint-disable-next-line no-console
          console.log(err);
        });
    }
  },
  destroyed() {
    this.timer && clearInterval(this.timer);
  },
  created() {
    document.title = this.name;
    this._getModuleList();
    this.timer =  setInterval(() => {
    this._getModuleList();
    }, 10000)
    getPointGoodList().then(res => {
      if (res.status === 200) {
        this.pointGoodList = res.data.data;
      }
    });
    getMallData().then(res => {
      if (res.status === 200) {
        this.carouselList = res.data.data.carousel;
        // this.promotionList = res.data.data.classify;
        this.itemList = res.data.data.commodity;
      }
    });
  },
  components: {
    searchInput,
    mainNav,
    itemBigImg,
    SeckillPanel,
    ClusterPanel
  }
};
</script>

<style lang="less" scoped>
.container {
  .mall-slider {
    background: #fff;
    padding: 0 3.2%;
  }

  .promotion {
    background: #fff;
    margin-top: 0.48rem;
    padding: 0.3rem 3.2% 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    box-sizing: border-box;

    .promotion-cell {
      border-radius: 0.2rem;
      // background: #dfdfdf;
      margin: 0 0.14rem 0.28rem;
      box-sizing: border-box;
      overflow: hidden;

      img {
        width: 100%;
      }
    }

    .right-container {
      width: calc(66% - 0.14rem);
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      .promotion-cell {
        width: calc(50% - 0.28rem);
        height: 3.6rem;
        overflow: hidden;

        img {
          width: 100%;
        }
      }
    }

    .big {
      height: 7.5rem;
      width: 33%;
      margin-right: 0;
    }

    .style-1 {
      height: 3.6rem;
      width: 31%;
    }

    .style-2 {
      height: 3.6rem;
      width: 48%;
    }

    .style-3 {
      height: 3.2rem;
      width: 48%;
    }
  }
  .ad {
    background: #fff;
    margin: 0.4rem 0;
  }
  .item-panel {
    background: #fff;
    margin-top: 0.4rem;

    .title-bar {
      height: 2rem;
      padding: 0 3.2%;
      display: flex;
      justify-content: space-between;
      background-color: #f1f5ff;
      line-height: 2rem;

      .title {
        font-weight: bold;
        color: #0084ff;
        font-size: 0.64rem;
      }

      .btn {
        color: #0084ff;
        font-size: 0.48rem;

        img {
          height: 0.44rem;
          width: 0.24rem;
          margin-left: 0.2rem;
        }
      }
    }

    .banner-img {
      height: 4.5rem;
      width: 100%;
      background-color: #dfdfdf;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .item-list {
      display: flex;
      flex-wrap: wrap;

      .item-cell {
        width: 50%;
        padding: 0.8rem 3.2% 0.48rem;

        .item-title {
          font-weight: bold;
          color: rgba(68, 68, 68, 1);
          font-size: 0.58rem;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          overflow: hidden;
          -webkit-line-clamp: 1;
        }

        .info {
          display: flex;
          justify-content: space-between;
          margin-top: 0.5rem;
          align-items: flex-end;
          .price {
            .vip-price {
              font-weight: bold;
              color: rgba(244, 67, 73, 1);
              font-size: 0.58rem;
              white-space: nowrap;
              .vip-tag {
                color: rgba(255, 255, 255, 1);
                font-size: 0.4rem;
                background: rgba(244, 67, 73, 1);
                border-radius: 0.12rem;
                padding: 0 0.1rem;
              }
            }

            .normal-price {
              margin-top: 0.4rem;
              font-weight: bold;
              color: rgba(68, 68, 68, 1);
              font-size: 0.48rem;
            }
          }

          .item-img {
            height: 2.4rem;
            width: 2.4rem;
            background-color: #dfdfdf;
            img {
              object-fit: cover;
              width: 100%;
              height: 100%;
            }
          }
        }
      }

      .item-cell:nth-child(1) {
        border-right: 1px solid rgba(233, 233, 233, 1);
        border-bottom: 1px solid rgba(233, 233, 233, 1);
      }

      .item-cell:nth-child(4) {
        border-top: 1px solid rgba(233, 233, 233, 1);
        border-left: 1px solid rgba(233, 233, 233, 1);
      }
    }
  }

  .item-panel_big-img {
    background: #fff;
    margin-top: 0.48rem;

    .title-bar {
      height: 2rem;
      padding: 0 3.2%;
      display: flex;
      justify-content: space-between;
      line-height: 2rem;
      background: #f1f5ff;
      .title {
        font-weight: bold;
        color: #0084ff;
        font-size: 0.64rem;
      }

      .btn {
        color: #1c8cff;
        font-size: 0.48rem;

        img {
          height: 0.44rem;
          width: 0.24rem;
          margin-left: 0.2rem;
        }
      }
    }
  }
}
.style1 {
  background: #fff;
  margin-top: 0.3rem;
  ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #fff;
    box-sizing: border-box;
  }
}
.style3 {
  background: #fff;
  margin-top: 0.3rem;

  ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #fff;
    box-sizing: border-box;
    li {
      width: 4.52rem;
      padding: 0.24rem 0;
      img {
        width: 100%;
      }
    }
  }
}
.style2,
.style4 {
  margin-top: 0.3rem;
  background: #fff;
  ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #fff;
    flex-wrap: wrap;
    li {
      width: 6.88rem;
      overflow: hidden;
      padding: 0.24rem 0;
      img {
        width: 100%;
      }
    }
  }
}
.style5 {
  margin-top: 0.3rem;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.24rem;
  box-sizing: border-box;
  height: 7.99rem;
  .left {
    width: 4.52rem;
    height: 7.5rem;
    margin-right: 0.4rem;
    div {
      overflow: hidden;
      height: 100%;
      img {
        height: 100%;
        vertical-align: bottom;
      }
    }
  }
  .right {
    height: 100%;
    overflow: hidden;
    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      li {
        width: 4.52rem;
        height: 3.6rem;
        overflow: hidden;
        margin-bottom: 0.3rem;
        margin-right: 0.3rem;
        &:nth-child(3),
        &:nth-child(4) {
          margin-bottom: 0;
        }
        &:nth-child(2),
        &:nth-child(4) {
          margin-right: 0;
        }
        img {
          height: 100%;
          vertical-align: bottom;
        }
      }
    }
  }
}
.cluster-wrapper {
  width: 100%;
  background: #fff;
  padding: 0.4rem 0.48rem;
  box-sizing: border-box;
  .cluster-inner {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .cluster-box {
      margin-right: 0.75rem;
      border: 1px solid #eee;
      &:last-child {
        margin-right: 0;
      }
    }
    
  }
  .tip {
      font-size: 0.48rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      text-align: center;
      margin-top: 0.4rem;
    }
}
</style>
